<template>
  <div class="list">
    <dl v-for="v in list" :key="v.id" @click="toDetail(v.id)">
      <dt>
        <img :src="v.urls[0]" alt="" />
      </dt>

      <dd>
        <h3>{{ v.title }}</h3>
        <p style="color: red;">￥{{ v.price }}</p>
      </dd>
    </dl>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  props: {
    list: {
      type: Array,
      require: true
    }
  },
  setup() {
    const router = useRouter();
    const toDetail = id => {
      router.push({
        name: 'Detail',
        params: {
          id
        }
      });
    };

    return {
      toDetail
    };
  }
};
</script>

<style scoped lang="scss">
.list {
  display: flex;
  flex-wrap: wrap;
  dl {
    width: 50%;
    flex-shrink: 0;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;

    img {
      width: 100%;
    }
  }
}
</style>